<template>
    <div ref="scrollRef" class="xx-home" @scroll="handleScrollerFun">
        <div class="xx-title"> <HomeTitle :scroll-top="scrollTop"></HomeTitle></div>
        <div class="xx-swapper"> <HomeSwaper></HomeSwaper> </div>
        <div class="xx-device"> <HomeDervice></HomeDervice> </div>
        <div class="xx-service"> <HomeService></HomeService> </div>
        <div class="xx-reservation"> <HomeReservation></HomeReservation> </div>
        <div class="xx-version"> <HomeVersion></HomeVersion> </div>
    </div>
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    import HomeTitle from '@/components/home/HomeTtitle.vue'
    import HomeDervice from '@/components/home/HomeDervice.vue'
    import HomeService from '@/components/home/HomeService.vue'
    import HomeSwaper from '@/components/home/HomeSwaper.vue'
    import HomeReservation from '@/components/home/HomeReservation.vue'
    import HomeVersion from '@/components/home/HomeVersion.vue'
    const scrollTop = ref<number>(0)
    const scrollRef = ref()
    const handleScrollerFun = () => {
        scrollTop.value = scrollRef.value.scrollTop
    }
</script>
<style scoped lang="less">
    .xx-home {
        height: 100%;
        width: 100%;
        margin: 0 auto;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .xx-device,
    .xx-service,
    .xx-reservation {
        margin-top: 30px;
    }
    .xx-device {
        padding: 0px 20px;
    }
</style>
